

/**回调函数:保存画板*/
function canvas_save() {
	// var svgExport = draw.exportSvg({ whitespace: true });
	var svgExport = draw.svg();
	if(selected_tool!=undefined) selected_tool.selectize(false);
	
	//callServer("svgimagevo.svg="+svgExport);
	// 同步到远程服务器
	$.ajax({
		type : "POST",
		url : "http://" + host + "/draw/savesvg.action",
		data : {
			"svgimagevo.svg" : svgExport,
			"width":	obj_set.bbox().width,
			"height":obj_set.bbox().height,
			"leftX":obj_set.bbox().x,
			"topY":obj_set.bbox().y,
			"svgimagevo.description":$("#paint_desc").val()
		},
		dataType : "json",
		success : function(data) {
				//var _data=JSON.parse($.trim(data.responseText));
				if (data.code == "0") {
					$('#loginzone').modal('show');
					$('#userlable').html('');
					$('#loginPageHref').html('登录');
				} 
				else  if(data.code == "1-0002"){
					alert(data.desc);
					$("#loginPageHref").trigger("click");
				}
				else
				{
					alert("成功");
					$("#drawhref").trigger("click");
				}
			
			
		},
		error : function(data) {
			//$('#synHintModal').modal('show')
			alert("操作发生错误");
		}

	});
}


/** 回调函数:保存元素属性信息 */
function editorSaveAct() {
	switch (selected_tool.type) {
	case "text":
		var _txtInput=$("#txtInput").val();
		var _colorInput=$("#colorInput").val();
		var _fontsize=$("#fontsize").val();
		var _bordercolorInput=$("#bordercolorInput").val();
		selected_tool.style("fill:" + _colorInput);
		selected_tool.text(_txtInput);
		selected_tool.font({
			family : 'Helvetica',
			size : _fontsize,
			anchor : 'middle',
			leading : '1em'
		})
		selected_tool.fill($("#colorInput").val());
		selected_tool.stroke({
			color : _bordercolorInput,
			opacity : 1
		})
		var projson="";
		projson=projson+"{";
		projson=projson+'"family":"Helvetica",';
		projson=projson+'"size":'+ _fontsize+',';
		projson=projson+'"anchor":"middle",';
		projson=projson+'"leading":"1em"'+',';
		projson=projson+'"fill":"'+_colorInput+'",';
		projson=projson+'"bordercolor":"'+_bordercolorInput+'",';
		projson=projson+'"text":"'+_txtInput+'"';
		projson=projson+"}";
		//console.log(projson);
		selected_tool.data(JSON.parse(projson));
		break;
	case "line":
		var _start_arrow=$("#arrow").is(':checked');
		var _end_arrow=$("#arrow-right").is(':checked');
		var _colorInput=$("#colorInput").val()
		var projson="";
		projson=projson+'"start_arrow":'+ _start_arrow+',';
		projson=projson+'"end_arrow":'+ _end_arrow+',';
		projson=projson+'"fill":"'+ _colorInput+'"';
		projson="{"+projson+"}";
		//console.log(projson);
		selected_tool.data(JSON.parse(projson));
		if (_start_arrow) {
			selected_tool.marker('start', 20, 20, function(add) {
				add.line(10, 10, 20, 0).stroke({
					width : 1
				});
				add.line(10, 10, 20, 20).stroke({
					width : 1
				});
				this.fill('#fe00ca')
			})
		}else{
			//console.log(selected_tool.attr("marker-start"));
			var attr_marker_start=selected_tool.attr("marker-start")
			
			if(attr_marker_start!=undefined) {
				selected_tool.reference('marker-start');
				selected_tool.attr("marker-start","");
				
			}
		}
		if (_end_arrow) {
			selected_tool.marker('end', 20, 20, function(add) {
				add.line(10, 10, 0, 0).stroke({
					width : 1
				});
				add.line(10, 10, 0, 20).stroke({
					width : 1
				});
				this.fill('#00fe00')
			})
		}else{
			//console.log(selected_tool.attr("marker-end"));
			var attr_marker_start=selected_tool.attr("marker-end")
			
			if(attr_marker_start!=undefined) {
				selected_tool.reference('marker-end');
				selected_tool.attr("marker-end","");
			}
			
		}
		selected_tool.stroke(_colorInput);
		selected_tool.attr("stroke-dasharray",$("#dashline").val());
		break;
	case "path":
		if ($("#arrow").is(':checked')) {
			selected_tool.marker('start', 20, 20, function(add) {
				add.line(10, 10, 20, 0).stroke({
					width : 1
				});
				add.line(10, 10, 20, 20).stroke({
					width : 1
				});
				this.fill('#000000')
			})

		}else{
			var attr_marker_start=selected_tool.attr("marker-start")
			
			if(attr_marker_start!=undefined) {
				selected_tool.reference('marker-start');
				selected_tool.attr("marker-start","");
			}
		}
		if ($("#arrow-right").is(':checked')) {
			selected_tool.marker('end', 20, 20, function(add) {
				add.line(10, 10, 0, 0).stroke({
					width : 1
				});
				add.line(10, 10, 0, 20).stroke({
					width : 1
				});
				this.fill('#000000')
			})
		}else{
			var attr_marker_start=selected_tool.attr("marker-end")
			
			if(attr_marker_start!=undefined) {
				selected_tool.reference('marker-end');
				selected_tool.attr("marker-end","");
			}
		}
		//console.log(selected_tool.array().value[0][1]);
		// selected_tool.stroke($("#colorInput").val());
		//selected_tool.style("fill:" + $("#colorInput").val());
		// selected_tool.stroke($("#colorInput").val())
		selected_tool.style('stroke', $("#bordercolorInput").val());
		selected_tool.attr("stroke-dasharray",$("#dashline").val());
		break;

	case "ellipse":
	case "circle":
		var projson="";
		var _bordercolorInput=$("#bordercolorInput").val();
		var _colorInput=$("#colorInput").val();
		var _radius_x=$("#circle-radius-x").val() == "0" ? 50 : $("#circle-radius-x").val();
		var _radius_y=$("#circle-radius-y").val() == "0" ? 50 : $("#circle-radius-y").val();
		
		projson=projson+'"radius-x":'+ _radius_x+',';
		projson=projson+'"radius-y":'+ _radius_y+',';
		projson=projson+'"fill":"'+ _colorInput+'",';
		projson=projson+'"bordercolor":"'+ _bordercolorInput+'"';
		projson="{"+projson+"}";
		selected_tool.style("fill:" + _colorInput);
		selected_tool.stroke({
			color : _bordercolorInput,
			opacity : 1
		})
		selected_tool.radius(_radius_x,_radius_y);
		selected_tool.data(JSON.parse(projson));
		selected_tool.attr("stroke-dasharray",$("#dashline").val());
		break;
	case "rect":
		var projson="";
		var _radius_x=$("#circle-radius-x").val();
		var _radius_y=$("#circle-radius-y").val();
		var _colorInput=$("#colorInput").val();
		var _bordercolorInput=$("#bordercolorInput").val();
		
		projson=projson+'"radius-x":'+ _radius_x+',';
		projson=projson+'"radius-y":'+ _radius_y+',';
		projson=projson+'"fill":"'+ _colorInput+'",';
		projson=projson+'"bordercolor":"'+ _bordercolorInput+'"';
		projson="{"+projson+"}";
		
		selected_tool.data(JSON.parse(projson));
		
		selected_tool.radius(_radius_x,_radius_y);
		selected_tool.style("fill:" + _colorInput);
		selected_tool.stroke({
			color : _bordercolorInput,
			opacity : 1
		})
		selected_tool.attr("stroke-dasharray",$("#dashline").val());
		break;
	case "polygon":
		var _colorInput=$("#colorInput").val();
		var _bordercolorInput=$("#bordercolorInput").val();
		var projson="";
		projson=projson+'"fill":"'+ _colorInput+'",';
		projson=projson+'"bordercolor":"'+ _bordercolorInput+'"';
		projson="{"+projson+"}";
		selected_tool.data(JSON.parse(projson));
		
		selected_tool.style("fill:" + _colorInput);
		selected_tool.stroke({
			color : _bordercolorInput,
			opacity : 1
		})
		selected_tool.attr("stroke-dasharray",$("#dashline").val());
		break;
	}
}

/** 回调函数:颜色板 */
function open_color_plate(event) {
	var bgcolor = $(this).css("background-color");
	var colorfor = $("#color-for").val();

	var hex_bgcolor = new SVG.Color(bgcolor).toHex();
	if (colorfor == "bgcolor") {
		$("#colorInput").val(hex_bgcolor);
		$("#bgcolor-block").css("background-color",hex_bgcolor);
	} else {
		$("#bordercolorInput").val(hex_bgcolor)
		$("#bdcolor-block").css("background-color",hex_bgcolor);
	}

}
var totalpage = 100;//这里是从服务端得到总共分页数  
var readedpage = 1;//当前滚动到的页数  

function more(){
	loading_share_icons(readedpage++);
}

function loading_share_icons(pageno){
	$('#imagezone').modal('show') ;
	if(browser.versions.mobile){
		$('#imagezone').removeClass('model_1');
		$('#imagezone').addClass('model_mobile');
	}else{
		$('#imagezone').addClass('model_1');
	}
	
	if($("#fluidframe").length == 0){
	$("#iconsfluidDiv").
	append("<iframe  width='100%' height='300px' frameborder='no'  border='0' src='fluid.html' id='fluidframe'></iframe>");
	}
}
/**
 * 图片panel面板 信息页,暂无效
 * @param pageno
 */
function loading_share_icons_idv(pageno){
	var one_row="";
	$.ajax({
		type : "POST",
		url : "http://" + host + "/draw/shareicon.action",
		data : "pageno="+pageno,//
		dataType : "json",
		success : function(data) {
			// var obj=eval('(' + data + ')');
			//显示面板
			//event.preventDefault()
			//$(this).tab('show');
			$('#imagezone').modal('show') 
			$.each(
				data,
				function(i, item) {

					one_row = one_row+ "<div class=\"grid-item\"><img  hint=\"按住鼠标拖动到面板上\" class=\"draw2d_droppable\"  src=\"/icon/"
										+ item.imgFileName
										+ "\"/>";
					one_row = one_row+ "<div class=\"dt-woo-desc\">";
					one_row = one_row+ "<p class=\"dt-woo-title\">";
					one_row = one_row+ "<a target=\"_blank\" href=\"\">######</a>";
					one_row = one_row+ "</p>";
					one_row = one_row+ "<p class=\"dt-woo-attr\">";
					one_row = one_row+ "18520人";
					one_row = one_row+ "</p>";
					one_row = one_row+ "<a target=\"_blank\" href=\"\" class=\"dt-woo-cat\">";
					one_row = one_row+ "使用它";
					one_row = one_row+ "</a>";
					one_row = one_row+ "</div>";
					one_row = one_row+ "</div>";
				}
			);
			//alert(one_row.length);
			if (one_row.length > 0) {
				
					$newElems = $(one_row).css({ opacity: 1 });
					var $container = $('#iconsfluidDiv');
					
                 	$newElems.imagesLoaded(function(){
                 	
	                	 //reloadItems
	                     $container.append($newElems);
	                     $container.masonry('appended', $newElems,true) 
	                     .masonry();
	                     $container.height(300);
	                     // 渐显新的内容  
	                    // $newElems.animate({ opacity: 1 });
	                     // 隐藏正在加载模块
	                     //$("#page_loading").hide("slow");     
	                     
	                    // #####拖动#####
	                 	$(".draw2d_droppable").draggable({
	        				appendTo : "body",
	        				stack : "body",
	        				zIndex : 27000,
	        				helper : "clone",
	        				drag : function(event, ui) {
	        					// event.clientX, event.clientY
	        					// ui.draggable, event.shiftKey, event.ctrlKey

	        				},
	        				stop : function(e, ui) {
	        				},
	        				start : function(e, ui) {
	        					$(ui.helper).addClass("shadow");
	        				}
	        			});
	                 	//##################
                 	});
                 	
			}
		

		},
		error : function() {
			$("#loginPageHref").trigger("click");
		}
	});
}
/**回调函数：图片panel面板点击*/
function tools_callback(event) {

	/*var $container = $('#iconsfluidDiv');
	$container.imagesLoaded(function() {
		$container.masonry({
			itemSelector : '.grid-item'
		});
	});*/
	loading_share_icons(1);
	
	   
	

}
/** 共享图标面板 */
function tools_callback_2(event) {
	event.preventDefault()
	$(this).tab('show');
	$
			.ajax({
				type : "POST",
				url : "http://" + host + "/draw/shareicon.action",
				data : {},//
				dataType : "json",
				success : function(data) {
					// var obj=eval('(' + data + ')');
					var one_row = "";
					$.each(
									data,
									function(i, item) {

										if (i % 4 == 0) {
											one_row = one_row
													+ "<DIV  class=\"pure-g\">";
										}
										one_row = one_row
												+ "<div class=\"pure-u-1-4 \"> <img hint=\"按住鼠标拖动到面板上\" class=\"draw2d_droppable .pure-img  double-border\"  src=\"/icon/"
												+ item.imgFileName
												+ "\"/> </div>";
										if (i % 4 == 3 || i == data.length - 1) {
											one_row = one_row + "</DIV>"
										}

					});

					$("#myiconset").html(one_row)

					$(".draw2d_droppable").draggable({
						appendTo : "body",
						stack : "body",
						zIndex : 27000,
						helper : "clone",
						drag : function(event, ui) {
							// event.clientX, event.clientY
							// ui.draggable, event.shiftKey, event.ctrlKey

						},
						stop : function(e, ui) {
						},
						start : function(e, ui) {
							$(ui.helper).addClass("shadow");
						}
					});

				},
				error : function() {
					alert("失败");
				}
			});
}

/**显示颜色面板*/
function showColorPanel(color_for) {
	$("#colorPanel").show();
	if(color_for=="bgcolor"){
		$("#colorPanel").css("margin-left","100px");
	}else{
		$("#colorPanel").css("margin-left","10px");
	}
	$("#color-for").val(color_for);
}